<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main" :id="id"></div>
    <!-- <div class="around-center"></div> -->
    <!-- <div class="around-line"></div> -->
    <!-- <div class="around-out"></div> -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import autoSize from '../../uitils/auto-font-size.js'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle
  },
  name: 'chart-rose-line',
  props: {
    title: String,
    shadow: {
      type: Boolean,
      default: true
    },
    color: {
      type: Array,
      default: () => {
        return [
          '#5B8FF9',
          '#5AD8A6',
          '#5D7092',
          '#F6BD16',
          '#E8684A',
          '#6DC8EC',
          '#9270CA',
          '#FF9D4D',
          '#269A99',
          '#FF99C3',
          '#FFD6E7',
          '#AAD8D8',
          '#D3C6EA',
          '#FFD8B8',
          '#B6E3F5',
          '#F6C3B7',
          '#FBE5A2',
          '#C2C8D5',
          '#BDEFDB',
          '#BDD2FD',
          '#14C9C9',
          '#AE9EFB',
          '#FADA3F',
          '#AAD804',
          '#DE6BA0'
        ]
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      minAngle: 42,
      center: ['28%', '55%'],
      myChart: null
    }
  },
  computed: {
    id: function() {
      return `main-${Math.random()}`
    },
    dataMap: function() {
      let obj = {}
      this.data.map((item, index) => {
        obj[item.name] = {
          dataIndex: index,
          name: item.name,
          ratio: item.ratio,
          value: item.value
        }
      })

      return obj
    }
  },
  mounted() {
    setTimeout(() => {
      this.onInit()
    }, 3500)
  },
  updated() {
    setTimeout(() => {
      this.onInit()
    }, 1000)
  },
  methods: {
    onInit() {
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var option

      // this.data.map(item => {
      //   if(item.value < 5) {
      //     item.value = 5
      //   }
      // })

      option = {
        animationDuration: 4000,
        animationDurationUpdate: 2000,
        tooltip: {
          show: true,
          formatter: params => {
            const { data, dataIndex } = params
            let color = ''
            if (dataIndex < this.color.length) {
              color = this.color[dataIndex]
            } else {
              color = this.color[dataIndex % this.color.length]
            }

            const icon = `<span style="display: inline-block;width:10px;height: 10px;background-color: ${color};border-radius: 50%;margin-right: 5px"></span>`
            const name = `<span style="color: ${color};">${data.name}</span>`
            const ratio = ` / ${data.ratio || '0%'}`
            return icon + name + ratio
          }
        },
        color: this.color,
        // graphic: {
        //   type: 'text',
        //   left: '18%',
        //   top: '48%',
        //   style: {
        //     text: '1'+'\n'+'情报总数',
        //     textAlign: 'center',
        //     fill: '#fff',
        //     fontSize: 20,
        //     fontWeight: 700,
        //   },
        // },
        legend: {
          show: true,
          type: 'scroll',
          orient: 'vertical',
          selectedMode: true,
          top: 'middle',
          right: '2%',
          itemGap: 0,
          itemWidth: 13,
          itemHeight: 12,
          icon: 'circle',
          // icon: 'roundRect',
          stillShowZeroSum: false,
          padding: 0,
          align: 'auto', // 图例标记和文本的对齐
          pageTextStyle: {
            color: '#fff'
          },
          textStyle: {
            fontSize: autoSize(14),
            // color: '#',
            rich: {
              name: {
                fontSize: autoSize(14),
                color: '#'
              },
              ratio: {
                fontSize: autoSize(14),
                color: '#fff'
              },
              value: {
                fontSize: autoSize(14),
                color: '#63A6DE'
              }
            }
          },
          formatter: params => {
            const { name, value, ratio, dataIndex } = this.dataMap[params]
            var maxlength = 7
            let nameStr = ''
            if (name.length > maxlength) {
              nameStr = name.substring(0, maxlength) + '...'
            } else {
              nameStr = name
            }
            return `{name|\n\n${nameStr}}{ratio|  ${ratio || '0%'}} \n\n {value|  ${value || '0'}}`
          },
          // padding: [0, -130, 30, -110],

          data: this.data
        },
        series: [
          // 主要展示层的
          {
            type: 'pie',
            radius: ['55%', '75%'],
            center: this.center,
            itemStyle: {
              borderRadius: 15,
              borderColor: '#000',
              borderWidth: 2
            },
            avoidLabelOverlap: true,
            minAngle: 0,
            startAngle: 160,
            label: {
              show: false
            },
            z: 5,
            roseType: true,
            data: this.data
          }
          // 边框的设置
          // {
          //   type: 'pie',
          //   radius: ['21%', '60%'],
          //   center: this.center,
          //   label: {
          //     show: false,
          //   },
          //   itemStyle: {
          //     color: 'rgba(0, 0, 0, .2)',
          //   },
          //   z: 6,
          //   roseType: true,
          //   data: this.data,
          // },
          // 圆心
          // 圆心
          // {
          //   radius: ['0', '12%'],
          //   center: this.center,
          //   type: 'pie',
          //   color: '#C2D7FD',
          //   minAngle: 30,
          //   emphasis: {
          //     scale: false,
          //   },
          //   label: {
          //     show: false,
          //   },
          //   hoverAnimation: false,
          //   tooltip: {
          //     show: false,
          //   },
          //   z: 5,
          //   itemStyle: {
          //     shadowColor: '#000',
          //     shadowBlur: 30,
          //   },
          //   data: [
          //     {
          //       value: 0,
          //     },
          //   ],
          // },
          // // 圆心外圈
          // {
          //   radius: ['20%', '19%'],
          //   center: this.center,
          //   type: 'pie',
          //   color: '#C2D7FD',
          //   minAngle: 30,
          //   emphasis: {
          //     scale: false,
          //   },
          //   label: {
          //     show: false,
          //   },
          //   hoverAnimation: false,
          //   tooltip: {
          //     show: false,
          //   },
          //   itemStyle: {
          //     shadowColor: '#000',
          //     shadowBlur: 10,
          //   },
          //   z: 5,
          //   data: [
          //     {
          //       value: 0,
          //     },
          //   ],
          // },
          // 外圈
          // {
          //   radius: ['70%', '69%'],
          //   center: this.center,
          //   type: 'pie',
          //   minAngle: 30,
          //   emphasis: {
          //     scale: false,
          //   },
          //   label: {
          //     show: false,
          //   },
          //   hoverAnimation: false,
          //   tooltip: {
          //     show: false,
          //   },
          //   itemStyle: {
          //     color: '#00CBFF',
          //     shadowColor: '#000',
          //     shadowBlur: 10,
          //   },
          //   z: 5,
          //   data: [
          //     {
          //       value: 0,
          //     },
          //   ],
          // },
        ]
      }

      myChart.setOption(option, true)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

#container {
  width: 100%;
  height: 30.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, .2);
  display: flex;
  flex-flow: column;

  .main {
    flex: 1;
  }
}
</style>
